<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>加减乘除运算</title>
    <style>
        pre {
            font-size: 20px;
        }
    </style>
</head>
<body>

<label for="select">
    <select id="select" onchange="selectOnchange(this)">
        <option value="add">加法</option>
        <option value="sub">减法</option>
        <option value="mul">乘法</option>
        <option value="div">除法</option>
    </select>
</label>

<label for="number1">数值1<input type="number" id="number1"/></label>
<label for="number2">数值2<input type="number" id="number2"/></label>
<label for="submit">提交<input type="submit" id="submit"/></label>
<br/>
<pre id="value1">
</pre>
<pre id="value2">
</pre>
<hr/>
<pre id="result">
</pre>
<script>
    let submit = document.getElementById("submit");
    // 默认是加法
    sessionStorage.setItem("operationType", "add");

    // 获取运算规则
    function selectOnchange(section) {
        sessionStorage.setItem("operationType", section.options[section.selectedIndex].value);
    }

    /**
     * 展示数字用
     */
    // Number 给数字补0
    function 给数字补0() {
        // 转换为数字
        let 运算数字1的数字类型 = Number(document.getElementById("number1").value);
        let 运算数字2的数字类型 = Number(document.getElementById("number2").value);

        let 运算数字1的字符串类型 = String(运算数字1的数字类型);
        let 运算数字2的字符串类型 = String(运算数字2的数字类型);

        let 运算数字1点的预测位置 = 运算数字1的字符串类型.indexOf(".");
        let 运算数字2点的预测位置 = 运算数字2的字符串类型.indexOf(".");

        let 运算数字1点的前置位置;
        let 运算数字2点的前置位置;

        if (运算数字1点的预测位置 === -1) {
            运算数字1点的前置位置 = 运算数字1的字符串类型.length;
        } else {
            运算数字1点的前置位置 = 运算数字1点的预测位置;
        }

        if (运算数字2点的预测位置 === -1) {
            运算数字2点的前置位置 = 运算数字2的字符串类型.length;
        } else {
            运算数字2点的前置位置 = 运算数字2点的预测位置;
        }

        let returnArray = [];
        // 默认返回值
        returnArray[0] = 运算数字1的字符串类型;
        returnArray[1] = 运算数字2的字符串类型;
        // 前置值
        if (运算数字2点的前置位置 > 运算数字1点的前置位置) {
            returnArray[0] = "0".repeat(运算数字2点的前置位置 - 运算数字1点的前置位置).concat(运算数字1的字符串类型);
        }
        if (运算数字1点的前置位置 > 运算数字2点的前置位置) {
            returnArray[1] = "0".repeat(运算数字1点的前置位置 - 运算数字2点的前置位置).concat(运算数字2的字符串类型);
        }
        // 后置值
        let 结果包含的点位置1 = returnArray[0].indexOf(".");
        let 结果包含的点位置2 = returnArray[1].indexOf(".");
        let 后缀长度1 = 0;
        let 后缀长度2 = 0;
        let returnArrayElement1 = returnArray[0];
        let returnArrayElement2 = returnArray[1];
        if (结果包含的点位置1 !== -1) {
            后缀长度1 = returnArrayElement1.length - (结果包含的点位置1) - 1;
        }
        if (结果包含的点位置2 !== -1) {
            后缀长度2 = returnArrayElement2.length - (结果包含的点位置2) - 1;
        }
        if (后缀长度1 > 后缀长度2) {
            if (结果包含的点位置2 !== -1) {
                returnArray[1] = returnArrayElement2.concat("0".repeat(后缀长度1 - 后缀长度2));
            } else {
                returnArray[1] = returnArrayElement2.concat(".").concat("0".repeat(后缀长度1 - 后缀长度2));
            }

        }
        if (后缀长度2 > 后缀长度1) {
            if (结果包含的点位置1 !== -1) {
                returnArray[0] = returnArrayElement1.concat("0".repeat(后缀长度2 - 后缀长度1));
            } else {
                returnArray[0] = returnArrayElement1.concat(".").concat("0".repeat(后缀长度2 - 后缀长度1));
            }
        }
        returnArray[0] = "0".concat(returnArray[0]);
        returnArray[1] = "0".concat(returnArray[1]);
        return returnArray;
    }

    // 1 找到对齐点，整数找
    submit.onclick = function () {
        let sdddd = 给数字补0();

        // 计算最终运算结果
        let 补零后的数字数组1 = sdddd[0];
        let 补零后的数字数组2 = sdddd[1];

        let mycars = [];

        function extracted(addResult, i) {
            if (addResult === 10) {
                mycars[i] = 0;
                sessionStorage.setItem("addValueTemp", 1);
            } else if (addResult > 10) {
                mycars[i] = Number(String(addResult).charAt(1));
                sessionStorage.setItem("addValueTemp", 1);
            } else {
                mycars[i] = addResult;
                sessionStorage.setItem("addValueTemp", 0);
            }
        }

        let strLength = 补零后的数字数组1.length;
        if (补零后的数字数组2.length > 补零后的数字数组1.length) {
            strLength = 补零后的数字数组2.length;
        }

        sessionStorage.setItem("addValueTemp", 0);
        for (let i = strLength - 1; i >= 0; i--) {
            let num1 = 补零后的数字数组1[i];
            let num2 = 补零后的数字数组2[i];
            if (num1 === "." || num2 === ".") {
                mycars[i] = ".";
                continue;
            }
            if (isNaN(num1)) {
                num1 = 0;
            }
            if (isNaN(num2)) {
                num2 = 0;
            }
            let item = sessionStorage.getItem("addValueTemp");
            let addResult = Number(num1) + Number(num2) + Number(item);
            extracted(addResult, i);
        }

        document.getElementById("value1").innerHTML = sdddd[0].split("").join(" ");
        document.getElementById("value2").innerHTML = sdddd[1].split("").join(" ");
        document.getElementById("result").innerHTML = mycars.join(" ").trim();

        // 获取运算类型
        let operationType = sessionStorage.getItem("operationType");
        let result = document.getElementById("result");
        if (operationType === "add") {
            //
        } else {
            result.innerHTML = "";
        }
    };

    /**
     * 加法
     * 数字情况列表
     * 1.都是正数
     * 2.有一个是正数
     * 3.都是负数
     * 小数点情况
     * 1.无小数点
     * 2.一个数有小数点
     * 3.两个个数有小数点
     * @param value1
     * @param value2
     */
    function add(value1, value2) {

    }

    // 减法
    function sub(value1, value2) {

    }

    // 乘法
    function mul(value1, value2) {

    }

    // 除法
    function div(value1, value2) {

    }

    /**
     * 是否等于0
     * value1 等于0返回1
     * value2 等于0返回2
     * 都不等于0，返回
     * @param value1
     * @param value2
     * @returns {number}
     */
    function isZero(value1, value2) {
        if (value1 === 0) {
            return 1;
        }
        if (value2 === 0) {
            return 2;
        }
        return 0;
    }


    // 计算结果

</script>
</body>
</html>